<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Insert title here</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script>
    <style type="text/css">
        .c1{position:fixed;
            top: 0;
            left: 0;
            width:100%;
            height:100%;
            min-width: 1000px;
            z-index:-10;
            background-repeat:no-repeat;
            background-size:cover;
            background-position: center 0;
        }
        .c2{padding:10px;
            width:350px;height:auto;
            background-color: #254665;
            opacity: 0.7;
            position:absolute;
            left: 37%;
            top: 35%;
            text-align:center;
            border-radius:10px;
            filter:opacity(0.9);
        }
        .login-button { /* 按钮美化 */
            width: 100px; /* 宽度 */
            height: 30px; /* 高度 */
            border-width: 0px; /* 边框宽度 */
            border-radius: 10px; /* 边框半径 */
            background: #1E90FF; /* 背景颜色 */
            cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
            outline: none; /* 不显示轮廓线 */
            font-family: Microsoft YaHei; /* 设置字体 */
            color: white; /* 字体颜色 */
            font-size: 14px; /* 字体大小 */
            margin-bottom:10px;
        }
        .login-button:hover{background-color:#5599ff;
        }
        .text{
            margin:5px;outline: none;
            width:200px;height:20px;
            border-radius:10px;
        }
    </style>
    <script>
        function Fun(){
            window.location.href="${pageContext.request.contextPath}/login";
        }
    </script>
</head>
<body>

<div>
    <img src="../../images/login.jpg" class="c1"/></div>
<div class="c2">
    <form action="${pageContext.request.contextPath}/register" method="post">
        <c:if test="${error!=null}"> <div class="alert alert-danger" role="alert" >
            <p>${error}</p></div></c:if>
        <c:if test="${msg!=null}"><div class="alert alert-success" role="alert" >
            <p align="center">${msg}</p></div><script>setTimeout(Fun,900);</script></c:if>
        <div><h3 style="color:gray;">REGISTER</h3></div>
        <div><input type="text" name="username" size="20" placeholder="用户名" class="text"/></div>
        <div><input type="password" name="psd1" size="20" placeholder="密码" class="text"/></div>
        <div><input type="password" name="psd2" size="20" placeholder="确认密码" class="text"/></div>
        <div><input type="submit" value="注册" class="login-button"  data-dismiss="alert"/>&nbsp;&nbsp;&nbsp;
            <a href="${pageContext.request.contextPath}/login1"><input type="button" value="返回" class="login-button"/></a></div>
    </form>
</div>
</body>
</html>